<template>
  <div class="login">
      <img 
        :src="src"
        class="myvideo"
      
      />
     
      <div class="login_main">
          <div class="login_logo">
                <img :src="require('@/assets/images/logo.png')" alt="">
          </div>
          <!-- <p>欢迎登录</p> -->
          <div class="login_cont">
    
                 <div class="loginname">
                        <el-form
                        :model="form"
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                        ref="myfrom"
                    >
                        <el-form-item label="账号" prop="account">
                        <el-input 
                        v-model="form.account" 
                        type="userword"
                        clearable
                        placeholder="请输入管理员账号"
                            :prefix-icon="User"
                            />
                        </el-form-item>
                         <el-form-item label="密码" prop="paw">
                            <el-input
                                v-model="form.paw"
                                type="password"
                                clearable
                                placeholder="请输入密码"
                                :prefix-icon="Lock"
                                show-password
                                @blur="checkdbpassword"
                            />
                            </el-form-item>
                        <el-form-item label="确认密码" prop="dbpassword">
                        <el-input
                            v-model="form.dbpassword"
                            type="password"
                            clearable
                            placeholder="请再次输入密码"
                            :prefix-icon="Lock"
                            show-password
                        
                        />
                        </el-form-item>
                        <el-form-item>
                            <div class="form_router">
                                <router-link :to="{name:'login'}">已有账号，前去登录</router-link>
                            </div>
                        </el-form-item>
                       <el-form-item>
                            <div class="btnlogin">
                                <el-button block type="success" class="btn1" @click="submitFrom">注册</el-button>
                                <el-button block type="warning" class="btn1 btn2" @click="resetform">重置</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

          </div>
            
      </div>

         <el-dialog
            v-model="dialogVisible"
            title="验证管理员秘钥"
            width="30%"
            :before-close="handleClose"
        >
            <el-form
                label-position="top"
                label-width="100px"
                :model="word"
                class="myform"
                ref="myword"
                :rules="rules"
            >   
                    <el-form-item 
                        label="管理员秘钥"
                        prop="yanzhen"
                    >
                        <el-input clearable  v-model="word.yanzhen" :prefix-icon="Lock"  show-password type="password"  placeholder="请输入秘钥" />
                    </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="danger" @click="changePass"
                    >验证</el-button
                    >
                </span>
            </template>
        </el-dialog>
  </div>
</template>

<script>
import {reactive,toRefs,ref} from "vue"
import {Lock,User} from '@element-plus/icons-vue'
import {reg} from "@/utils/validate"
//消息提示
import { ElMessage } from 'element-plus'
//路由跳转
import {useRouter} from 'vue-router'
//ajax
import {ajax} from '@/api'
export default {
   setup(props) {
        const myfrom=ref()
        const router= useRouter()
        const myword=ref()
          //重置操作
        const resetform=()=>{
            //resetFields   重置当前字段并删除验证结果。 
            myfrom.value.resetFields()
        }

        //判断两次密码不同
        const checkDbpass=(rule,value,callback)=>{
            if(state.form.paw!=value){
                callback(new Error("两次密码不一致"))
            }else{
            callback()
            }
        }
        const checkdbpassword=()=>{
            if(reg.pwd.test(state.form.paw)&&reg.pwd.test(state.form.dbpassword)){
            myfrom.value.validateField('dbpassword')
            }
        }

          //关闭弹出框
         const handleClose = ()=>{
            state.dialogVisible = false;
        }

        //验证秘钥
        const changePass=()=>{
           console.log(state.word.yanzhen);
           state.form.key=state.word.yanzhen
           console.log(state.form);
           
            myfrom.value.validate(async(valid)=>{
            console.log(valid);
            if(valid){
                console.log(state.form);
                let res=await ajax.register(state.form)
                if(res.code==200){
                    router.push({name:'login'})
                }
                    console.log('提交成功');
            }

            })

        }

        //提交祖册  判断有没有秘钥
        const submitFrom=()=>{
          
          myfrom.value.validate(async(valid)=>{
          if(valid){
                console.log(1111);
                 state.dialogVisible = true;
                 if(state.flag){
                     console.log('验证成功');
                 }

          }else{
            ElMessage.error("请输入正确的注册信息")
          }
          
          })
        }
       const state=reactive({
       src:require("@/assets/images/hk.gif"),
        form:{
            key:null
        },
        word:{},
        flag:false,
            User,
            Lock,
            rules:{
                account:[
                    {
                        required:true,message:'账号必填'
                    },
                     {
                        pattern:/^\d{5}$/,message:'账号5位数字'
                    },
                ],
                paw:[
                     {
                        required:true,message:'密码必填'
                    },
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                   
                ], dbpassword:[
                     {
                        required:true,message:'密码必填'
                    },
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    },
                    {
                      validator:checkDbpass,trigger:"blur",message:'两次密码不一样'
                    }
                ],
            },
             dialogVisible:false,
       })

       
       return{
           ...toRefs(state),
             myfrom,
             resetform,
             checkdbpassword,
             submitFrom,
             handleClose,
             changePass
             
       }
       
   }
}
</script>

<style lang="scss">
.login{
    width: 100%;
    height: 100%;
    .myvideo{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login_main{
        height: 400px;
        width: 400px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        border: 1px solid #f5f5f5;
        background:rgba(231, 227, 227, 0.5) ;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgb(99, 98, 98);
        padding: 10px;
        p{
            color:#333;
            margin-top: 20px;
            font-size: 30px;
            width: 100%;
            text-align: center;

        }
        .login_logo{
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
            flex-direction: column;
            img{
                height: 100%;
            }
        }
        .login_cont{
            margin-top:50px;
            .loginname{
                .el-form-item__label{
                    color: #fff;
                }
                .form_router{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    a{
                        color: #ff6700;
                        font-size: 14px;
                        // text-decoration: none;
                    }
                }
               .btnlogin{
              width: 100%;
              display: flex;
              justify-content: space-between;
              .btn1{
                margin-bottom: 10px;
                width: 100%;
              }
              .btn2{
                margin-left: 5px;
              }
            }
            }
            .el-tabs__nav{
                width: 100%;
                .el-tabs__active-bar{
                    background-color: #ff6700;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:#ff6700;
                }
            }
        }
    }
}
</style>